
<template>
  <view class="form-box">
    <u-cell-group>
      <u-cell-item 
        v-for="(item, index) in list" 
        :title="item"
        :value="value[index]" 
        :key="index" 
        @click="showDatetimePicker(index)"></u-cell-item>
    </u-cell-group>
    <u-picker mode="time" v-model="show[0]" :params="params" @confirm="changeDate(0,$event)"></u-picker>
    <u-picker mode="time" v-model="show[1]" :params="params" @confirm="changeDate(1,$event)"></u-picker>
  </view>
</template>

<script>
export default{
  name:"monthSelect",
  props:{
    defaultMonths: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: ["年月份开始", "年月份结束"],
      show: {
        0: false,
        1: false
      },
      value: [],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      }
    }
  },
  watch:{
    
  },
  mounted() {
    this.value = this.defaultMonths;
  },
  created() {
    
  },
  methods:{
    showDatetimePicker(index) {
      this.show[index] = true
    },
    changeDate(index, e) {
      const val = `${e.year}-${e.month}`
      if(index === 0) {
        const splitDate = this.value[1].split('-')
        const startTime = new Date(val).getTime()
        const endTime = new Date(this.value[1]).getTime()
        if(startTime > endTime) {
          this.value[1] = val
          // this.$u.toast("开始日期不能大于结束日期")
        } else if(e.year !== splitDate[0]) {
          this.value[1] = val
          this.$u.toast("开始日期和结束日期不能跨年")
        }
      } else {
        const splitDate = this.value[0].split('-')
        const startTime = new Date(this.value[0]).getTime()
        const endTime = new Date(val).getTime()
        if(endTime < startTime) {
          this.value[0] = val
          this.$u.toast("结束日期不能小于开始日期")
        } else if(e.year !== splitDate[0]) {
          this.value[0] = val
          this.$u.toast("开始日期和结束日期不能跨年")
        }
      }
      this.value[index] = val;
      this.$emit("change", this.value);
    },
  },
  
}
</script>

<style scoped lang="scss">
  
</style>